<template>
  <div v-if="visible" class="floating-panel">
    <span class="close-btn" role="button" aria-label="关闭" tabindex="0" @click="handleCancel" @keydown.enter="handleCancel">×</span>
    <div class="floating-panel__header">结果</div>
    <div class="floating-panel__body"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
const emit = defineEmits<{ (e:'cancel'):void }>();
const visible = ref(true);
function handleCancel(){ visible.value=false; emit('cancel') }
function handleKey(e:KeyboardEvent){ if(e.key==='Escape'&&visible.value){ handleCancel() } }
onMounted(()=>window.addEventListener('keydown',handleKey))
onBeforeUnmount(()=>window.removeEventListener('keydown',handleKey))
</script>
<style scoped lang="scss">
@use './common.scss' as *;
</style>